<template>
  <div class="app-container">
    <!-- 条件查询 -->
    <el-form :inline="true" :model="query" size="small">
      <el-form-item label="标题">
        <el-input v-model.trim="query.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="query.status" clearable placeholder="请选择">
          <el-option v-for="item in processStatus" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row style="margin-bottom:20px">
      <el-button icon="el-icon-plus" size="small" type="primary" @click="clickShowForm('新增')">新增申请</el-button>
    </el-row>

    <!-- stripe 带斑马纹 -->
    <el-table :data="list" stripe border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50" />
      <el-table-column align="center" prop="username" label="请假人" min-width="90" />
      <el-table-column align="center" prop="title" label="标题" min-width="160" />
      <el-table-column align="center" prop="leaveTypeStr" label="请假类型" min-width="90" />
      <el-table-column align="center" prop="startDateStr" label="请假开始时间" width="160" />
      <el-table-column align="center" prop="endDateStr" label="请假结束时间" width="160" />
      <el-table-column align="center" prop="statusStr" label="业务状态" width="90">
        <template slot-scope="{row}">
          <el-tag effect="plain">{{ row.statusStr }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createDateStr" label="创建日期" width="160" />
      <el-table-column align="center" label="操作" fixed="right" width="220">
        <template slot-scope="{row}">
          <!-- 0已撤回，1未提交，2处理中，3已完成 -->
          <el-button v-if="row.status == 0 || row.status == 1" type="text" @click="clickShowForm('编辑', row)">编辑
          </el-button>
          <el-button
            v-if="row.status == 2 || row.status == 3 || row.status == 5"
            type="text"
            @click="clickShowForm('详情', row)"
          >详情
          </el-button>
          <el-button v-if="row.status == 2" type="text" @click="clickCancelProcess(row)">撤回</el-button>
          <el-button v-if="row.status == 0" type="text" @click="clickSubmitApply(row)">重新申请</el-button>
          <el-button v-if="row.status == 1" type="text" @click="clickSubmitApply(row)">提交申请</el-button>
          <el-button
            v-if="row.status == 2 || row.status == 3 || row.status == 4"
            type="text"
            @click="clickProcessHistory(row)"
          >审批历史
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page.pageNum"
      :page-sizes="[10, 20, 50]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 请假表单 -->
    <el-dialog :title="operate" :visible.sync="formVisible" width="1000px" destroy-on-close @close="closeForm(false)">
      <leave-form :operate="operate" :business-key="row.id" @close="closeForm" />
    </el-dialog>

    <!-- 提交申请 -->
    <submit-apply ref="sumbitApplyRef" :row="row" />

    <!-- 撤回申请 -->
    <cancel-apply ref="cancelRef" :business-key="row.id" :proc-inst-id="row.processInstanceId" />

    <!-- 审批历史 -->
    <history ref="historyRef" :business-key="row.id" :process-instance-id="row.processInstanceId" />
  </div>
</template>
<script>
// 流程状态
const processStatus = [
  { value: 0, label: '已撤回' },
  { value: 1, label: '待提交' },
  { value: 2, label: '处理中' },
  { value: 3, label: '已完成' },
  { value: 4, label: '已作废' },
  { value: 5, label: '已删除' }
]

import LeaveForm from '@/components/Process/Form/LeaveForm'

import SubmitApply from './components/SubmitApply'
import CancelApply from './components/CancelApply'
import History from '@/components/Process/History'

import api from '@/api/workflow/leave'

export default {
  name: 'Leave', // 和对应路由表中配置的name值一致
  components: { LeaveForm, SubmitApply, CancelApply, History },

  data() {
    return {
      processStatus, // 流程状态
      list: [
        // 测试数据
        {
          'id': 'leave2:3:62509',
          'username': 'meng',
          'title': '怀孕了',
          'leaveTypeStr': '事假',
          'startDateStr': '2022-02-24 08:12:12',
          'endDateStr': '2023-04-15 15:37:36',
          'statusStr': '处理中',
          'status': 2,
          'createDateStr': '2022-01-24 17:07:16'
        },
        {
          'id': 'test:1:60011',
          'username': 'xue',
          'title': '调休22',
          'leaveTypeStr': '调休',
          'startDateStr': '2022-02-24 08:12:12',
          'endDateStr': '2023-04-15 15:37:36',
          'statusStr': '已撤回',
          'status': 0,
          'createDateStr': '2022-01-24 17:07:16'
        }
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      query: {}, // 查询条件
      operate: '新增', // 操作标识：新增，编辑，详情
      formVisible: false, // 显示隐藏业务表单
      row: {}, // 点击的行数据

      definitionId: null, // 流程定义id
      processInstanceId: null // 流程图
    }
  },

  created() {
    // 加载列表数据
    this.fetchData()
  },

  methods: {
    // 分页条件查询文章列表
    async fetchData() {
      const { data } = await api.getList(this.query, this.page.pageNum, this.page.pageSize)
      this.list = data.records
      this.page.total = data.total
    },

    // 当每页显示多少条改变后触发
    handleSizeChange(val) {
      this.page.size = val
      this.fetchData()
    },
    // 切换页码触发
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.fetchData()
    },

    // 条件查询方法
    queryData() {
      this.page.pageNum = 1
      this.fetchData()
    },

    // 刷新重置
    reload() {
      this.query = {}
      this.fetchData()
    },

    // 点击显示表单
    clickShowForm(operate, row = {}) {
      this.operate = operate
      this.row = row
      this.formVisible = true
    },

    // 关闭表单
    closeForm(refresh) {
      // 清空点击数据
      this.row = {}
      // 隐藏
      this.formVisible = false
      // 刷新列表
      if (refresh) {
        this.fetchData()
      }
    },

    // 提交申请
    clickSubmitApply(row) {
      this.row = row
      this.$refs.sumbitApplyRef.visible = true
    },

    // 点击审批进度
    clickProcessHistory(row) {
      this.row = row
      this.$refs.historyRef.visible = true
    },

    // 撤回申请
    clickCancelProcess(row) {
      this.row = row
      this.$refs.cancelRef.visible = true
    }

  }
}
</script>
